<template>
  <view class="page">
    <wd-navbar
      title="壁纸设置"
      fixed
      placeholder
      left-arrow
      safeAreaInsetTop
      custom-class="nav"
      :bordered="false"
      @click-left="handleClickLeft"
    ></wd-navbar>
    <view class="wallpaper_list">
      <!-- <view class="wallpaper_item xf_box">
				<wd-img src="/static/assets/my/xf.png" width="50" height="50"></wd-img>
				<wd-gap height="15rpx"></wd-gap>
				<wd-text text="壁纸/锁屏修复" color="#1E1E1E" size="20px"></wd-text>
				<wd-gap height="15rpx"></wd-gap>
				<wd-text text="壁纸自动消失?" color="#848484" size="16px"></wd-text>
				<wd-text text="点此恢复" color="#848484" size="16px"></wd-text>
			</view> -->
      <view
        v-for="(item, index) in state.list"
        :key="index"
        class="wallpaper_item"
      >
        <view
          class="fall-video"
          v-if="item.association != 'null' && item.association"
        >
          <wd-icon color="#fff" name="play-circle-filled" size="22px"></wd-icon>
        </view>
        <image
			@click="handleClickItem(item)"
          style="width: 100%; height: 100%"
          mode="aspectFill"
          :src="item.url"
        ></image>
        <view class="mask_info_box">
          <text></text>
          <wd-img
            @click="deleteWallpaper(item)"
            width="15"
            height="15"
            src="/static/assets/my/del.png"
          ></wd-img>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { toRouter } from "@/hooks/utils";
import { reactive, onMounted } from 'vue';
const state = reactive({
	list: []
})
const handleClickLeft = function handleClickLeft() {
  uni.navigateBack()
}
const initList = ()=> {
	uni.request({
		url: '/api/wallpaper/set/get?username=' + uni.getStorageSync('wpa_username'),
	}).then(res=>{
		state.list = res.data
	})
}
onMounted(()=>{
	initList()
})
const handleClickItem = (item) => {
	toRouter('/pages/preview/index',`name=${item.name}&url=${item.url}&association=${item.association}&category=${item.category}`)
}
const deleteWallpaper = (item) => {
	uni.showModal({
		title: '提示',
		content: '确定要删除该壁纸吗？',
		success: (res) => {
			if (res.confirm) {
				uni.request({
					url:'/api/wallpaper/set/delete',
					method:'POST',
					data:{
						url: item.url,
					},
					success:()=>{
						uni.showToast({
							title: '删除成功',
							icon:'success',
							duration: 1000
						})
						initList()
					}
				})
			}
		}
	})	
}
</script>

<style lang="scss" scoped>
:deep(.nav) {
  background: rgb(245, 245, 245)
    url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat top
    left/100% auto;
}
.page {
  position: relative;
  &:before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(245, 245, 245)
      url("http://124.223.41.167:8080/mobile/static/images/bg.png") no-repeat
      top left/100%;
    z-index: -1;
  }
}
.wallpaper_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  padding: 40rpx;
  .wallpaper_item {
    position: relative;
    overflow: hidden;
    font-size: 0;
    border-radius: 8px;
    height: 630rpx;
    .mask_info_box {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
      padding: 20rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &.xf_box {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      background: #eeeeee;
    }
  }
}
.fall-video {
  position: absolute;
  z-index: 99;
  top: 5px;
  right: 5px;
}
</style>
